<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas class='canvas'></canvas>
		<script>
			var canvas = document.querySelector('.canvas')
			var c1 = canvas.getContext('2d')
			canvas.width = 900
			canvas.height = 500
			// canvas.style.border = '1px solid #000'

			var rectH = 20
			var rectW = 20
			c1.lineWidth = .3 //设置线段粗细
			for (var i = 0; i < canvas.width / rectH + 1; i++) {
				// 绘制横线
				c1.moveTo(0, i * rectH)
				c1.lineTo(canvas.width, i * rectH)

				// 绘制竖线
				c1.moveTo(i * rectW, 0)
				c1.lineTo(i * rectW, canvas.height)
			}
			c1.stroke()

			// 绘制线段
			c1.beginPath() //开辟一个新路径，开辟新状态的绘图
			c1.lineWidth = 2
			c1.strokeStyle = 'red'
			c1.moveTo(0, 500)
			c1.lineTo(60, 440)
			c1.lineTo(80, 360)
			c1.lineTo(200, 400)
			c1.lineTo(400, 380)
			c1.lineTo(450, 0)
			c1.stroke()

			c1.beginPath()
			c1.lineWidth = 0.5
			c1.strokeStyle = 'green'
			c1.moveTo(450, 0)
			c1.lineTo(500, 380)
			c1.lineTo(700, 400)
			c1.lineTo(820, 360)
			c1.lineTo(840, 440)
			c1.lineTo(900, 500)
			c1.stroke()
		</script>
	</body>
</html>
